import { EyeInvisibleOutline, EyeOutline, LeftOutline } from 'antd-mobile-icons';
import { Form, Input, Toast,NavBar } from 'antd-mobile';
import React, { Component } from 'react';
import '../styles/Register.scss'
import {user_register} from "../api/index";

class Register3 extends Component {
  constructor(props) {
    super(props)
    this.state = {
      active: false
    }
  }
  // 点击完成
  async finish() {
    var res = await this.refs.fromRef.getFieldValue()
    // console.log(this.props.location.state.phone);
    // console.log(res);
    var reg = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{6,18}$/
    var res2 = reg.test(res.password)
    if (res2) {
      var res3 = await user_register({ tel: this.props.location.state.phone, password: res.password })
      // console.log(res3);
      if (res3.data.code == 200) {
        Toast.show({
          icon: 'success',
          content: '注册成功',
        })
        this.props.history.push('/login')
      }
      else {
        Toast.show({
          icon: 'fail',
          content: '注册失败',
        })
      }
    }
  }
  // 检测用户输入的密码
  kk(changedValues, allValues) {
    // console.log(allValues.password);
    var reg = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{6,18}$/
    var res = reg.test(allValues.password)
    if (res) {
      this.setState({ active: true })
    } else {
      this.setState({ active: false })
    }
  }
  // 返回
  back() {
    this.props.history.go(-1)
  }
  render() {
    return (
      <div className='register'>
        <NavBar className='header' onBack={() => { this.back() }}>注册</NavBar>
        <div className="register_main">
          <p className='register_code'>请设置登录密码</p>
          <Form layout='horizontal' ref='fromRef' onValuesChange={(changedValues, allValues) => { this.kk(changedValues, allValues) }}>
            <Form.Item
              style={{ paddingLeft: 0 }}
              name='password'
              extra={
                <div className='eye'>
                  {!this.state.visible ? (
                    <EyeInvisibleOutline onClick={() => this.setState({ visible: true })} />
                  ) : (
                    <EyeOutline onClick={() => this.setState({ visible: false })} />
                  )}
                </div>
              }
            >
              <Input
                placeholder='请设置至少6位登录密码'
                clearable
                type={this.state.visible ? 'text' : 'password'}
              />
            </Form.Item>
          </Form>
          <p className='register_code'>密码强度校验，最少6位，包括至少一个大写字母，一个小写字母，一个数字</p>
        </div>
        <div className="register_bottom">
          <div className={'register_next ' + (this.state.active ? 'liang' : '')} onClick={() => { this.finish() }}>完成</div>
        </div>
      </div>
    );
  }
}

export default Register3;